<template>
    <div id="app">
      <div class="apply-car-two-container">
        <div class="driver-info flex">
          <img src="../../assets/images/car.png" alt="Driver Photo" />
          <div class="d-r f24">
            <div class="f28 fontB">姓名</div>
            <div>电话</div>
            <div>车牌号</div>
            <div>
              <van-rate readonly allow-half void-icon="star" void-color="#eee" :value="score" color="#ee0a24" size="16px" />
            </div>
            <div class="appointment" @click="appointmentTap">预约用车</div>
          </div>
        </div>
        <div class="driver-in-seven-days flex align mB30">
          <span class="t1"></span>
          <span class="t2">司机情况（7天内）</span>
        </div>
        <div class="num-con" >
          <div class="num-item"  v-for="(item, index) in [1,2,3]" :key="index" >
            <span class="t1">出车</span>
            <div class="t2 displayInline">11-20 09:00 <span>至11-20 11:00</span></div>
            <span class="t3">车牌号</span>
          </div>
        </div>
        <div class="f24 tC">暂无数据~</div>
      </div>
    </div>
  </template>
  
  <script>
  import { Rate } from 'vant';
  import 'vant/lib/rate/index.css';
  
  export default {
    name: 'App',
    components: {
      'van-rate': Rate
    },
    data() {
      return {
        driverPhoto: '',
        driverName: '',
        phone: '',
        licenseNumber: '',
        score: 0,
        sevenList: []
      };
    },
    methods: {
      appointmentTap() {
        // 预约用车的逻辑
      }
    }
  };
  </script>
  
  <style scoped>
  #app {
    height: 100%;
  }
  
  .apply-car-two-container {
    padding: 20px 40px;
    text-align: left;
    font-size: 14px;
  }
  
  .driver-info {
    margin-bottom: 40px;
  }
  
  .driver-info img {
    width: 100px;
    height: 100px;
    margin-right: 20px;
    border-radius: 50%;
  }
  
  .appointment {
    width: 160px;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    background: #3f84f1;
    color: #fff;
    margin-top: 10px;
  }
  
  .num-con {
    margin: 20px 0;
    background: #fff;
  }
  
  .num-item {
    border: 1px solid rgba(153, 153, 153, 1);
    border-radius: 10px;
    font-size: 14px;
    line-height: 50px;
    padding: 0 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;

  }
  
  .num-item span {
    display: inline-block;
  }
  
  .num-item .t1 {
    /* width: 16%; */
    font-weight: bold;
  }
  
  .num-item .t2 {
    /* width: 58%; */
  }
  
  .num-item .t3 {
    /* width: 24%; */
  }
  
  .driver-in-seven-days .t1 {
    display: inline-block;
    width: 6px;
    height: 26px;
    background: #3f84f1;
    margin-right: 10px;
  }
  
  .driver-in-seven-days .t2 {
    font-size: 18px;
    font-weight: bold;
  }
  .flex {
    display: flex;
  }
  </style>